import React from 'react';
import ReactDOM from 'react-dom/client';
import { Layout, Menu, theme, Statistic, } from 'antd';
import { createBrowserRouter, RouterProvider, Outlet, Link, Route, useLocation } from 'react-router-dom';
import './index.css'
import { HomeOutlined, HistoryOutlined, FieldTimeOutlined, SpotifyOutlined } from '@ant-design/icons';
import { AppStateProvider } from '../store/context.jsx';
// 引入你的页面组件
import App from './App';
import CarPlate from './views/CarPlate';
import VideoList from './views/History';
import StatsPage from './views/Static';
import VideoHeader from '../components/VideoHeader';
import LiveStatsPage from './views/LiveStatics';

const { Header, Sider, Content } = Layout;

const Home = () => {
  const location = useLocation();
  return (
    <Layout style={{
      minHeight: '100vh',
  }}>
    <Sider theme='light' width={250} style={{
      borderRight: '1px solid #f0f0f0',
      width: '400px'
    }}>
    <div className="title" style={{ textAlign: 'center', padding: '16px 16px', borderBottom: '1px solid #f0f0f0', height: 80,
      fontSize: '20px', fontWeight: 'bold', color: '#333', background: '#fff',
    }}>
      人脸、车牌在线识别与离线检索系统
    </div>
      <Menu theme="light" mode="inline" defaultSelectedKeys={['1']} style={{
        borderRight: 'none',
        width: '100%'
      }}>
        <Menu.Item key="2" icon={<HomeOutlined/>}>
          <Link to="/">首页</Link>
        </Menu.Item>
        <Menu.Item key="3" icon={<HistoryOutlined />}>
          <Link to="/history">历史记录</Link>
        </Menu.Item>
        {/* <Menu.Item key="4" icon={<SpotifyOutlined />}>
          <Link to="/livedetect">实时检测</Link>
        </Menu.Item> */}
      </Menu>
      {location.pathname === '/livedetect' || location.pathname === '/static' && <VideoHeader />}
      {/* <VideoHeader /> */}
    </Sider>
    <Layout>
      <Header style={{ padding: 0, background: '#fff', borderBottom: '1px solid #f0f0f0', height: 80, 
          fontSize: '24px', fontWeight: 'bold', color: '#333', display: 'flex', alignItems: 'center', justifyContent: 'center',
       }}>
      </Header>
      <Content style={{ padding: 30, background: '#fff', minHeight: 280, paddingTop: 40 }}>
        <Outlet />
      </Content>
    </Layout>
  </Layout>
  )
}

// 定义路由
const router = createBrowserRouter([
  {
    path: '/',
    element: <Home/>,
    children: [
      { index: true, element: <App /> },

      { path: 'history', element: <VideoList /> },
      {
        path: 'static', element: <StatsPage />,
      },
      {
        path: 'livedetect', element: <LiveStatsPage/>
      }

    ],
  },
]);

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <AppStateProvider>
      <RouterProvider router={router} />
    </AppStateProvider>
  </React.StrictMode>,
);